<template>
  <div class="divider-box" :style="{ padding: paddingBetween ? paddingBetween : '' }">
    <div class="divider"></div>
    <div class="tips">{{ text }}</div>
  </div>
</template>

<script setup>
defineProps({
  text: {
    type: String,
    default: '分割线'
  },
  paddingBetween: {
    type: String,
    default: ''
  }
});
</script>

<style lang="less" scoped>
.divider-box {
  width: 100vw;
  height: 30px;
  // padding: 0 15px;
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: -15px;

  .divider {
    width: 100%;
    border-bottom: 1px solid rgba(238, 238, 238, 1);
  }

  .tips {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    z-index: 1;
    font-family: PingFangSC-Regular;
    font-size: 13px;
    color: rgba(39, 41, 48, 0.6);
    text-align: justify;
    font-weight: 400;

    &:after {
      content: '/';
      display: inline-block;
      color: rgba(84, 139, 246, 1);
      margin-left: 8px;
      transform: scale(0.6);
      font-weight: 800;
    }

    &:before {
      content: '/';
      display: inline-block;
      color: rgba(84, 139, 246, 1);
      margin-right: 8px;
      transform: scale(0.6);
      font-weight: 800;
    }
  }
}
</style>